/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<login-head></login-head>
		<view class="content30">
			<view  class="loginsingup-input">
				<!--登录表单-s-->
				<form @submit="submitAddress" id="regFrom" >
					<view class="lsu lsus">
						<view class="icon icon1" :style="{backgroundImage: 'url('+imgHost+'user/ico-login-m.png)'}"></view>
						<input type="text"  placeholder-class="place" @focus="mobileChange"  v-model="mobile"class="text" name="username" id="username_2" value="" placeholder="请输入账号/手机号">
						<view class="tips" v-show="mobileTips" >
							<image :src="imgUrl+'user/tishi_1.png'" mode=""></image>
							<text>{{mobileText}}</text>
						</view>
					</view>
					<view class="lsu lsus">
						<view class="icon icon2" :style="{backgroundImage: 'url('+imgHost+'user/ico-login-m.png)'}"></view>
						<input  type="password"  placeholder-class="place" @focus="passwordChange" v-model="password" class="text" name="password" id="password" value="" placeholder="请输入由6-16位字符组成的密码">
						<view class="tips" v-show="passwordTips">
							<image :src="imgUrl+'user/tishi_1.png'" mode=""></image>
							<text>{{passwordText}}</text>
						</view>
					</view>
					<view class="lsu test lsus">
						<view class="icon icon2"  :style="{backgroundImage: 'url('+imgHost+'user/ico-login-m.png)'}"></view>
						<input class="text"  placeholder-class="place" @focus="password2Change" v-model="password2" maxlength="16"  type="password" name="verify_code" id="verify_code_2" value="" placeholder="请输入由6-16位字符组成的密码">
						<view class="tips" v-show="password2Tips">
							<image :src="imgUrl+'user/tishi_1.png'" mode=""></image>
							<text>{{password2Text}}</text>
						</view>
					
					</view>
					<view class="agreement">
						<view class="circle mr" @tap="changeCircle" v-show="ishide"></view>
						<view class="tigou mr" @tap="changeCircle" v-show="!ishide" :style="{backgroundImage: 'url('+imgHost+'user/tigou-2.png)'}"></view>
						我已阅读并同意
						<!-- <image :src="imgUrl+'user/tigou-2.png'" class="tigou"></image> -->
						<navigator hover-class="none" :url="'/pages/index/webview/webview?type=system&doc_code=agreement'" open-type="navigate">《注册服务协议》</navigator>
						<view class="tips" v-show="tips">
							<image :src="imgUrl+'user/tishi_1.png'" mode=""></image>
							<text>{{tipsText}}</text>
						</view>
					</view>
					<button class="submit-btn" type="primary" form-type="submit" >注册</button>
				</form>
				<!--登录表单-e-->
			</view>
		</view>
	</view>
</template>

<script>
	import {register} from "@/api/api.js";
	import common from "@/common/common";
	import config from "@/api/config";
	import loginHead from "@/pages/user/login/components/login-head.vue";
	import Md from "md5";
	export default {
		data() {
			return {
				imgHost:config.host,
				mobile:"",//手机号码
				password:"",//密码
				password2:"",//第二次输入密码
				ishide:true,
				imgUrl:config.imgUrl,
				mobileTips:false,//手机号提示
				passwordTips:false,//密码提示
				password2Tips:false,//确认密码提示
				tips:false,//阅读提示
				tipsText:"",
				mobileText:"",
				passwordText:"",
				password2Text:""
				
			};
		},
		components:{
			loginHead
		},
		methods:{
			submitAddress(){
				/*正则验证手机号*/
				if(this.mobile==""||this.password==""||this.password2==""){
					
					this.mobileText="手机号不能为空!";
					this.passwordText="登录密码不能少于6个字符";
					this.password2Text="确认密码不能为空!"
					this.mobileTips=true;
					this.passwordTips=true;
					this.password2Tips=true;
					return false;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.mobile))&&this.mobile!=""){
					this.mobileTips=true;
					this.mobileText="手机格式有误"
					return false;
				} 
				let passwordFlag=common.VerifyPassword(this.password);
				if(!passwordFlag){
					return false
				}
				if(this.password!=this.password2){
						this.password2Tips=true;
					this.password2Text="两次密码不一致"
					return false;
				}
				if(this.ishide==true){
					this.tips=true;
					this.tipsText="请勾选注册服务"
					return false
				}else{
					this.tips=false;
				}
				// console.log(this.password.length)
				
				let password=Md("TPSHOP"+this.password)
				console.log(this.mobile)
				console.log(password)
				let params={
					"mobile":this.mobile,
					"password":password
				}
				this._register(params)
			},
			_register(params){
				register(params).then(res=>{
					console.log(res)
					if(res){
						this.toast("注册成功!")
						setTimeout(this.jump, 1000)
					}
				})
			},
			mobileChange(){
				this.mobileTips=false
			},
			password2Change(){
				this.password2Tips=false
			},
			passwordChange(){
				let that=this;
				that.passwordTips=false;
				
			},
			
			changeCircle(){
				this.ishide=!this.ishide;
			},
			jump(){
				uni.navigateTo({
					url:"/pages/user/login/login"
				})
			},
			/*提示*/
			toast(title){
				uni.showToast({
					icon:"none",
				    title: title,
				    duration: 2000
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.header {
		position: relative;
		image {
			width: 100%;
			height: 370rpx;
		}
		.logo{
			position: absolute;
			top: 120rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 307rpx;
			height: 119rpx;
		}
	}
	
	.loginsingup-input{
		padding-top: 91rpx;
	}
	.content30 {
		margin: 0 98rpx;
	
		.lsu {
			display: flex;
			align-items: center;
			height: 75rpx;
			line-height: 75rpx;
			padding-top: 40rpx;
			border: none;
			position: relative;
			justify-content: space-between;
	
			input.text {
				height: 75rpx;
				width: 492rpx;
				border: none;
				border-bottom: 1px solid #dbdbdb;
				border-right: 1px solid #fff;
				padding-left: 0;
				padding-right: 0.213333rem;
				font-size: 0.554667rem;
				background-color: #fff;
				box-sizing: border-box;
				justify-content: space-between;
				font-size: 40rpx;
			}
	
			.lsus {
				display: flex;
				align-items: center;
				height: 2.4533rem;
				line-height: 2.45333rem;
				padding-top: 0.8rem;
				border: none;
				position: relative;
				justify-content: space-between;
			}
	
			.cold_1 {
				position: absolute;
				bottom: 30rpx;
				right: 0;
				width: 144rpx;
				height: 50rpx;
				font-size: 0.469333rem;
				background: none;
				color: #ff3939;
				border: 1px solid #ff3939;
				border-radius: 50rem;
				display: block;
				padding: 0;
				text-align: center;
			}
		}
	}
	
	.icon {
		float: left;
		width: 40rpx;
		height: 40rpx;
		// background-image: url("user/ico-login-m.png");
		background-repeat: no-repeat;
		background-size: 40rpx 280rpx;
		margin-right: 0.4rem;
	}
	
	.icon1 {}
	
	.icon2 {
		background-position: 0 -40rpx;
	}
	.icon3{
		background-position: 0 -80rpx;
	}
	.submit-btn {
		width: 100%;
		height: 80rpx;
		color: #fff;
		background-color: #ff3939;
		margin-top: 44rpx;
		
		border-radius: 40rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}
	
	.signup-find {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		margin: 20rpx 98rpx 0;
		padding-top: 20rpx;
		font-size: 24rpx;
	}
	.eye{
		width:40rpx;
			height:24rpx;
			// background-image:url("user/eye.png");
			background-repeat:no-repeat;
			background-size:cover;
			display:block;
			position:absolute;
			right:130rpx;
			top:64rpx;
			cursor:pointer;
			background-position:0
	}
	.circle{
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1px solid #666;
	}
	.tigou{
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1px solid #d0b740;
		// background: url("user/tigou-2.png") no-repeat center center;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 20rpx;
	}
	.agreement{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 64rpx;
		position: relative;
		font-size:24rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color: #666;
		
		navigator{
			color: #FFA439;
		}
		.tips{
			top: 30rpx;
			left: 38rpx;
			image{
				margin-top: 6rpx;
			}
		}
	}
	.mr{
		margin-right: 10rpx;
	}
	.tips{
		
		position: absolute;
		left: 62rpx;
		top: 94rpx;
		image{
			    vertical-align: top;
			    margin-top: 30rpx;
			width: 24rpx;
			height: 24rpx;
		}
		text{
			margin-left: 8rpx;
			color: #FF3939;
			font-size:20rpx;
			font-family:PingFang SC;
			font-weight:500;
		}
	}
	.place{
		font-size:32rpx;
	}
</style>
